<template>
  <div ref="vueEchartContainer" style="width: 100%;height:100%;">
    <VueEchart :option="options" style="width: 100%;height:100%;" />
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<!--
author： 叶明龙
email： 18591978263@126.com
眼睛原型进度条
-->
<script>
const elementResizeDetectorMaker = require("element-resize-detector");
const erd = elementResizeDetectorMaker();
import VueEchart, { echarts } from "./VueEchart";
export default {
  name: "CircularProgress",
  props: {
    // 背景色
    backgroundColor: {
      type: String,
      default: "rgba(125,249,10,0.2)"
    },
    // 前景色
    foregroundColor: {
      type: String,
      default: "#7df90a"
    },
    barWidth: {
      type: Number,
      default: 25
    },
    total: {
      type: Number,
      default: 100
    },
    value: {
      type: Number,
      default: 40
    }
  },
  computed: {
    options() {
      const backgroundColor = this.backgroundColor;
      const foregroundColor = this.foregroundColor;
      const value = this.value;
      const total = this.total;
      const barWidth = this.barWidth;
      const size = this.size;
      const option = {
        polar: {
          radius: [size - barWidth, size],
          center: ["50%", "50%"]
        },
        angleAxis: {
          max: total,
          startAngle: 90,
          show: false
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          // 内圈
          {
            name: "内圈",
            type: "bar",
            barWidth: barWidth,
            showBackground: true,
            backgroundStyle: {
              color: backgroundColor
            },
            coordinateSystem: "polar",
            roundCap: true,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(2,161,255,0.00)"
                  },
                  {
                    offset: 1,
                    color: foregroundColor
                  }
                ])
              }
            },
            data: [value]
          }
        ]
      };
      return option;
    }
  },
  data() {
    return {
      size: 300
    };
  },
  components: {
    VueEchart
  },
  mounted() {
    erd.listenTo(this.$refs.vueEchartContainer, element => {
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      this.size = Math.min(...[width, height]) / 2;
    });
  },
  beforeDestroy() {
    erd.uninstall(this.$refs.vueEchartContainer);
  }
};
</script>
<style lang="scss" scoped>
.bar-radius {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 100%;
}
</style>
